<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="pragma"   content="no-cache" />   
<meta http-equiv="Cache-Control" content="no-cache,must-revalidate" />   
<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../js/jquery.draggable-1.0.js"></script>
<script type="text/javascript" src="../js/jquery.resizable-1.0.js"></script>
<script type="text/javascript" src="../js/jquery.fishflow-1.0.js"></script>
<link rel="stylesheet" type="text/css" href="../css/fishflow.css"></link>
<title>事件调用</title>
<script language="javascript">
</script>
<!--[if lt IE 9]>
<?import namespace="v" implementation="#default#VML" ?>
<![endif]-->
</head>
<body>
<div>
	<input type="button" value="选中流程节点2" id="selectNodeBtn"></input>
	<input type="button" value="选中连接线3" id="selectLineBtn"></input>
	<input type="button" value="获取选中对象" id="fetchSelectNodeBtn"></input>
	<input type="button" value="获取所有节点" id="fetchAllNode"></input>
	<input type="button" value="获取第二个节点" id="fetchNode2"></input>
	<input type="button" value="获取流程图数据" id="fetchGraphData"></input><br/>
	<div style="font-size:12px;color:#00F;margin:5px;">可以拖动节点后，再比较获取的流程图数据</div>
</div>
<div id="dgxDemo"></div>
</body>
</html>

<script language="javascript">
var wfg = new fishflow({
	title : "FISHFLOW案例",
	renderTo : $("#dgxDemo"),
	width:800,
	height:600,
	editable:true,
	canvasAutoFixSize:true,
	toolBox : ["pointer","direct","line","node","start","end"],
	data:{
		//工具箱按钮
		//节点
		nodes:[
			{id:"startNode",name : "开始"          ,type : "start"    ,left : 20  ,top : 205 ,width : 25   ,height : 25},
			{id:"unit1"    ,name : "流程节点1"     ,type : "node"     ,left : 120 ,top : 200 ,width : 120  ,height : 40},
			{id:"unit2"    ,name : "流程节点2"     ,type : "node"     ,left : 320 ,top : 200 ,width : 120  ,height : 40},
			{id:"unit3"    ,name : "流程节点3"     ,type : "complex"  ,left : 520 ,top : 200 ,width : 120  ,height : 40},
			{id:"endNode"  ,name : "结束"          ,type : "end"      ,left : 720 ,top :204  ,width : 25   ,height : 25}
		],
		//连接线
		lines:[
			{id:"demo_line_1",from : "startNode"  ,to : "unit1"   ,type : "linkLine" },
			{id:"demo_line_2",from : "unit1"      ,to : "unit2"   ,type : "linkLine" },
			{id:"demo_line_3",from : "unit2"      ,to : "unit3"   ,type : "linkLine" },
			{id:"demo_line_4",from : "unit3"      ,to : "endNode" ,type : "linkLine" }
		]
	}
});

$(document).ready(function(){
	
	$("#selectNodeBtn").click(function(){
		wfg.selectedElement("unit2");
	});
	$("#selectLineBtn").click(function(){
		wfg.selectedElement("demo_line_3");
	});
	
	$("#fetchSelectNodeBtn").click(function(){
		var selectedElenet = wfg.getSelectedElement();
		if(selectedElenet){
			alert(selectedElenet["elementType"]+","+selectedElenet["name"]);
		}else{
			alert("没有选中对象");
		}
	});
	
	$("#fetchAllNode").click(function(){
		var nodeList = wfg.getAllNodes();
		alert("节点数量:"+nodeList.length);
	});
	
	$("#fetchNode2").click(function(){
		var nodeList = wfg.getAllNodes();
		//alert("第二个节点TOP:"+nodeList[1].offset().top);
		alert("第二个节点名称:"+nodeList[1]["name"]);
	});
	
	$("#fetchGraphData").click(function(){
		var gpData = wfg.getGraphData();
		var data = "节点数据:\r\n================================\r\n"+simpleJson2Text(gpData.nodes)
		+"\r\n\r\n连线数据:\r\n================================\r\n"+simpleJson2Text(gpData.lines)
		alert(data);
	});


	function simpleJson2Text(json){
		var text = [];
		for(var k in json){
			var v = json[k];
			var row = [];
			for(var n in v){
				row.push('"'+n+'":"'+v[n]+'"');
			}
			text.push("{"+row.join(",")+"}");
		}
		return text.join("\r\n-----------------\r\n");
	};


	///////////////////////////////////////////////////////////////////
	var a = {x:[1,2,3]};
	var b = {x:[4,5]};
	//a = $.extend(a, b);
	//alert(a.x.length);
});

</script>